建立專案

建立專案方式我使用 vite + React ts

npm create vite@latest

測試框架 ：Jest

Jest 是前端測試框架的一種，因為以前用 create-react-app 就用它在寫，習慣所以就一直用下去了

1. 安裝套件

透過 npm 安裝會用到的套件到專案環境中
Testing Library
Jest

npm i -D jest @types/jest ts-node ts-jest @testing-library/react @testing-library/user-event identity-obj-proxy @testing-library/jest-dom @types/testing-library__jest-dom jest-environment-jsdom

2. 到 package.json 設定測試指令

在 scripts 內新增

"scripts": {
    "test": "jest"
  }

3. 新增 jest.config.ts

在專案根目錄新增一個名為 jest.config.ts的檔案，並將以下程式碼貼上，把 tsx 結尾的檔案，使用 ts-node 的 ts-jest 處理。
由於要模擬圖片跟CSS再加入一些設定
圖片使用 fileMock.js(等等會新增) 處理，CSS 使用 identity-obj-proxy 套件來處理。

export default {
    testEnvironment: "jsdom",
    transform: {
      "^.+\\.tsx?$": "ts-jest",
    },
    moduleNameMapper: {
      "\\.(gif|ttf|eot|svg|png)$": "<rootDir>/test/__mocks__/fileMock.js",
      "\\.(css|less|sass|scss)$": "identity-obj-proxy",
    },
  };

4. 新增test資料夾

在根目錄( 不是在src內喔 )新增資料夾 test，於該資料夾底下再新增一個資料夾__mocks__，最後在 __mocks__ 資料夾底下新增 fileMock.js(要用來模擬圖片的)，並將以下程式碼新增進去。
test-file-stub

module.exports = "test-file-stub";

5. 新增測試檔案

在src/ 內新增 __test__ 資料夾，並在裡面新增 App.test.tsx 測試檔案

test("testing jest correctly", () => {
  expect(true).toBeTruthy();
});

npm run test

沒意外你可以看到

 PASS  src/__tests__/App.test.tsx
  ✓ testing jest correctly (3 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total

最後我們再確認一下 render 測試是否正常
改寫 App.test.tsx

import { render, screen } from "@testing-library/react";
import App from "../App";

test("Render main page correctly", async () => {
  render(<App />);
  expect(true).toBeTruthy();
});

test("render main page button correctly", async () => {
  render(<App />);
  const button = await screen.findByRole("button");
  expect(button.innerHTML).toBe("count is 0");
});

然後

npm run test

 PASS  src/__tests__/App.test.tsx
  ✓ Render main page correctly (40 ms)
  ✓ render main page button correctly (119 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total

如果成功的話，代表我們環境已經設定完了
明天會介紹 jest 常用到的語法，再來就能一起寫測試囉！

參考